<script>
import {loadAdminCourse} from "@/api/admin/crouse.js";
import {removeAdminCourse} from "@/api/admin/crouse.js";
import {ElNotification} from "element-plus";
import addCourseDialog from "./dialog/addCourseDialog.vue";
import EditCourseDialog from "./dialog/editCourseDialog.vue";

const weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
export default {
  components: {
    addCourseDialog,
    EditCourseDialog,
  },
  data(){
    return {
      totle: 0,
      params: {
        pageNo: 1,
        pageSize: 5,
        cname: '',
        tname: '',
        department: '',
      },
      list: [],
      shouAdd: false,
      shouEdit: false,
    }
  },
  methods: {
    formatterCourse(row,cou,cv){
      let cArr=cv.split('-');
      let week=cArr[0]
      let start=cArr[1]*1+1
      let end=cArr[1]*1+cArr[2]*1
      return `${weeks[week]} 第 ${start} 节 至 第 ${end} 节`
    },
   async initCourseData(){
     let data = await loadAdminCourse(this.params)
     this.totle = data.total;
     this.list = data.list;
    },
    async deleteCourse(row){
      await removeAdminCourse(row.course_id);
      ElNotification.success({
        title:`“${row.course_name}”删除成功`,
      })
      this.initCourseData()
    },
    openEdit(row) {
      this.$refs.editDialog.params = {
        course_id: row.course_id,
        course_teacher_id: row.teacher_id,
        course_name: row.course_name,
        course_grade: row.course_grade,
        course_time: row.course_time,
        course_location: row.course_location,
        course_credit: row.course_credit,
        course_max_size: row.course_max_size,
        course_exam_date: row.course_exam_date,
        course_exam_location: row.course_exam_location,
      }
      this.shouEdit = true
    },
  },
  created() {
    this.initCourseData()
  }
}
</script>
<template>
    <el-card>
        <template #header>课程管理</template>
        <div class="nav-bar">
            <div class="search">
                <el-input size="small" placeholder="系名" clearable v-model="params.department"></el-input>
                <el-input size="small" placeholder="教师名" clearable v-model="params.tname"></el-input>
                <el-input size="small" placeholder="课程名" clearable v-model="params.cname"></el-input>
                <el-button size="small" type="primary" @click="initCourseData()">
                    <template #icon>
                        <el-icon><EpSearch /></el-icon>
                    </template>
                    <span>查询</span>
                </el-button>
            </div>
            <div>
                <el-button size="small" type="success" @click="shouAdd=true" v-auth="['add']">
                    <template #icon>
                        <el-icon><EpPlus /></el-icon>
                    </template>
                    <span>添加</span>
                </el-button>
            </div>
        </div>
        <el-table border stripe size="small" :data="list">
            <template #empty>
                <el-empty description="暂无数据" />
            </template>
            <el-table-column label="序号" type="index" width="60"></el-table-column>
            <el-table-column label="课程名" prop="course_name"></el-table-column>
            <el-table-column label="代课教师" prop="teacher_name"></el-table-column>
            <el-table-column label="所属系" prop="department_name"></el-table-column>
            <el-table-column label="年级" prop="course_grade"></el-table-column>
            <el-table-column label="学分" width="50" #default="{row}">
              <el-tag size="small" effect="dark">{{row.course_credit}}</el-tag>
            </el-table-column>
            <el-table-column label="上课时间" prop="course_time" :width="160" :formatter="formatterCourse" width="140px"></el-table-column>
            <el-table-column label="已选" width="50" #default="{row}">
              <el-tag type="success" size="small" effect="dark">{{row.course_selected_count}}</el-tag>
            </el-table-column>
            <el-table-column label="座位数" width="60" #default="{row}">
              <el-tag type="info" size="small" effect="dark">{{row.course_max_size}}</el-tag>
            </el-table-column>
            <el-table-column label="操作" width="120" #default="{row}" v-auth="['update', 'delete']">
                <el-button type="primary" link @click="openEdit(row)" v-auth="['update']">编辑</el-button>
                <el-popconfirm :title="`是否删除课程“${row.course_name}”`" @confirm="deleteCourse(row)">
                  <template #reference>
                  <el-button type="danger" link v-auth="['delete']">删除</el-button>
                  </template>
                </el-popconfirm>
            </el-table-column>
        </el-table>
        <el-pagination
            size="small"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5,10,20,30,40,50]"
            :total="totle"
            v-model:page-size="params.pageSize"
            v-model:current-page="params.pageNo"
            @change="initCourseData()"
        />
    </el-card>
  <div v-auth="['add']">
  <addCourseDialog v-model="shouAdd" @reset="initCourseData"></addCourseDialog>
  </div>
  <div v-auth="['update']">
  <EditCourseDialog
    ref="editDialog"
    v-model="shouEdit"
    @reset="initCourseData"></EditCourseDialog>
  </div>
</template>

<style scoped>
.nav-bar{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 14px;
}
.nav-bar .el-input{
    width: 180px;
    margin-right: 10px;
}
.el-pagination{
    margin-top: 14px;
    justify-content: center;
}
.el-tag{
  width: 100%;
}
</style>
